<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<script type="text/javascript">

	//主机地址
    var wsUrl = "ws://10.101.0.247:9000/video";
    //视频流地址
	var rtspUrl = "rtsp://10.101.0.248/user=admin&password=&channel=1&stream=0.sdp";

    //websocket连接
    var ws = wsUrl + "?url=" + encodeURIComponent(rtspUrl);

	console.info(ws);
	
	var output;

	//初始化操作
	function init() {
		output = document.getElementById("output");
		testWebSocket();
	}

	function testWebSocket() {
		websocket = new WebSocket(ws);
		websocket.onopen = function(evt) {
			onOpen(evt)
		};
		websocket.onclose = function(evt) {
			onClose(evt)
		};
		websocket.onmessage = function(evt) {
			onMessage(evt)
		};
		websocket.onerror = function(evt) {
			onError(evt)
		};
	}

	function onOpen(evt) {
		writeToScreen("CONNECTED");
		doSend("WebSocket rocks");
	}

	function onClose(evt) {
		writeToScreen("DISCONNECTED");
	}

	//收到消息
	function onMessage(evt) {
		var obj = eval('(' + evt.data + ')');
		image = obj['data']['face']['image'];
		writeToScreen('<img height="100" width="100" src="data:image/png;base64,' + image + '"/>');
		//关闭连接
		//websocket.close();
	}

	function onError(evt) {
		writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
	}

	function doSend(message) {
		writeToScreen("SENT: " + message);
		websocket.send(message);
	}

	//输出识别结果到屏幕
	function writeToScreen(message) {
		var result = document.getElementById("test");
		var pre = document.createElement("p");
		pre.style.wordWrap = "break-word";
		pre.innerHTML = message;
		output.appendChild(pre);
	}

	window.addEventListener("load", init, false);
</script>

<h2>WebSocket Test</h2>

<div id="output">
	<p id="test">result</p>
</div>